<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container" v-loading="loading">
    <el-form style="width: 650px;" label-width="120px" :rules="rules" :model="form" ref="form">
      <div class="title">基本信息</div>
      <el-form-item label="产品名称:" prop="productName">
        <el-input v-model="form.productName" placeholder="请输入产品名称" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="产品关键字:" prop="productKeyword">
        <el-input v-model="form.productKeyword" placeholder="请输入产品关键字" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="主图:" prop="surfaceImgUrl">
        <el-upload class="avatar-uploader" action="/app/sys/oss/upload"  :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="form.surfaceImgUrl" :src="form.surfaceImgUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="原创款编号:" prop="originalNumber">
        <el-input v-model="form.originalNumber" placeholder="请输入原创款编号" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="产品分组:" prop="module">
        <span>设计</span>
      </el-form-item>
      <div class="title">商品属性</div>
      <el-form-item label="适用人群:" prop="categoryId">
        <el-select v-model="form.categoryId" placeholder="请选择" class="select-group" @change="handleChangePeople">
          <el-option
            v-for="item in suitPeople"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="款式:" prop="typeId" v-if="form.categoryId">
        <el-select v-model="form.typeId" placeholder="请选择" class="select-group">
          <el-option
            v-for="item in kindList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="风格:" prop="featureId">
        <el-select v-model="form.featureId" placeholder="请选择" class="select-group">
          <el-option
            v-for="item in style"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="尺码信息:" prop="sizeImage">
        <el-upload class="avatar-uploader" action="/app/sys/oss/upload"  :show-file-list="false" :on-success="handleSizeSuccess">
          <img v-if="form.sizeImage" :src="form.sizeImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="尺码说明:" prop="sizeExplain">
        <el-input v-model="form.sizeExplain" type="textarea" resize="none" rows="5" placeholder="尺码说明" class="inputRow"></el-input>
      </el-form-item>
      <div class="title">销售属性</div>
      <el-form-item label="货币单位:" prop="priceUnit">
        <el-radio-group v-model="form.priceUnit">
          <!--<el-radio label="$">USD / $</el-radio>-->
          <el-radio label="RMB">RMB</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品数量单位:" prop="numberUnit">
        <el-select v-model="form.numberUnit"  placeholder="请选择" >
          <el-option
            v-for="item in numberUnitList"
            :key="item.value"
            :label="item.description"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售性质:" prop="buyType">
        <el-radio-group v-model="form.buyType">
          <el-radio label="1">买断价</el-radio>
          <el-radio label="2">使用权</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="销售价:" prop="salePrice">
        <el-input v-model.number="form.salePrice" placeholder="请输入销售价" class="inputRow"></el-input>
      </el-form-item>
      <div class="title">产品详情</div>
      <el-form-item label="设计作品名称:" prop="designName">
        <el-input v-model="form.designName" placeholder="请输入设计作品名称" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="设计理念:" prop="designIdea">
        <el-input v-model="form.designIdea" type="textarea" resize="none" rows="5" placeholder="设计理念" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="产品图:" prop="productImgList">
        <el-upload  action="/app/sys/oss/upload" list-type="picture-card" :limit="2" :on-preview="handlePictureCardPreview" :on-success="handleProductImgSuccess" :on-remove="handleProductImgRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="产品结构图:" prop="structureImgList">
        <el-upload  action="/app/sys/oss/upload" list-type="picture-card" :limit="8" :on-preview="handlePictureCardPreview" :on-success="handleStructureImgSuccess" :on-remove="handleProductImgRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="产品详情描述:" prop="detailImgList">
        <el-upload action="/app/sys/oss/upload"  list-type="picture-card" :limit="20" :on-preview="handlePictureCardPreview" :on-success="handleDetailImgSuccess" :on-remove="handleDetailImgRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="作品描述:">
        <el-input v-model="form.description" type="textarea" resize="none" rows="5" placeholder="作品描述" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="文件格式:" prop="fileType">
        <el-select v-model="form.fileType" placeholder="请选择" class="select-group">
          <el-option
            v-for="item in fileType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核附件:" prop="fileUrl">
        <el-upload
          class="upload-demo"
          action="/app/sys/oss/upload"
          :on-success="handleFileSuccess"
          :on-remove="handleFileRemove">
          <el-button size="small" type="primary" v-if="!form.fileUrl">点击上传</el-button>
          <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
        <!--<el-upload action="/app/sys/oss/upload"  list-type="picture-card" :limit="9" :on-preview="handlePictureCardPreview" :on-success="handleDetailImgSuccess" :on-remove="handleDetailImgRemove">-->
          <!--<i class="el-icon-plus"></i>-->
        <!--</el-upload>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="previewVisible">
      <img width="100%" :src="previewImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters, mapState } from 'vuex'
  import { designerPublishGoodsPc, querySuitPeople, querySuitPeopleKind, queryStyleList, queryDictList } from '@/api/goods'
  export default {
    name: 'seller_index',
    data() {
      const validateProduct = (rule, value, callback) => {
        if (value.length <= 0) {
          callback(new Error('请上传产品图'))
        } else {
          callback()
        }
      }
      const validateStructure = (rule, value, callback) => {
        if (value.length <= 0) {
          callback(new Error('请上传产品结构图（前幅和后幅）'))
        } else {
          callback()
        }
      }
      const validateDetail = (rule, value, callback) => {
        if (value.length <= 0) {
          callback(new Error('请上传产品详情图'))
        } else {
          callback()
        }
      }
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
        },
        goodsId: '', // 商品id
        userId: '', // userId
        loading: false, // 加载中
        previewVisible: false, // 图片预览显示
        previewImageUrl: '', // 图片预览
        numberUnitList: [], // 数量单位
        form: {
          productName: '', // 商品名称
          productKeyword: '', // 关键词
          surfaceImgUrl: '', // 主图
          originalNumber: '', // 原创款编号
          categoryId: '', // 适用人群
          typeId: '', // 款式
          featureId: [], // 风格
          sizeImage: '', // 尺码信息
          sizeExplain: '', // 尺码说明
          priceUnit: 'RMB', // 货币单位
          numberUnit: '', // 数量价格单位
          buyType: '1', // 销售属性
          salePrice: '', // 销售价
          designName: '', // 设计作品名称
          designIdea: '', // 设计理念
          productImgList: [], // 产品图列表
          structureImgList: [], // 产品结构图列表
          detailImgList: [], // 详情图列表
          fileType: '', // 文件类型
          fileUrl: '', // 附件地址
          description: '' // 作品描述
        }, // 表单内容
        suitPeople: [], // 适用人群
        kindList: [], // 款式
        style: [], // 风格
        fileType: [
          {
            value: '1',
            label: 'JPG合并稿'
          },
          {
            value: '2',
            label: 'PSD文件'
          },
          {
            value: '3',
            label: 'CDR文件'
          },
          {
            value: '4',
            label: 'ET纸样文件'
          }
        ],
        rules: {
          productName: [
            {
              required: true,
              message: '请输入商品名称',
              trigger: 'blur'
            }
          ],
          productKeyword: [
            {
              required: true,
              message: '请输入产品关键字',
              trigger: 'blur'
            }
          ],
          surfaceImgUrl: [
            {
              required: true,
              message: '请上传主图',
              trigger: 'blur'
            }
          ],
          originalNumber: [
            {
              required: true,
              message: '请填写原创款编号',
              trigger: 'blur'
            }
          ],
          categoryId: [
            {
              required: true,
              message: '请选择适用人群',
              trigger: 'blur'
            }
          ],
          typeId: [
            {
              required: true,
              message: '请选择款式',
              trigger: 'blur'
            }
          ],
          featureId: [
            {
              required: true,
              message: '请选择风格',
              trigger: 'blur'
            }
          ],
          sizeImage: [
            {
              required: true,
              message: '请上传尺码信息',
              trigger: 'blur'
            }
          ],
          sizeExplain: [
            {
              required: true,
              message: '请填写尺码说明',
              trigger: 'blur'
            }
          ],
          priceUnit: [
            {
              required: true,
              message: '请选择货币单位',
              trigger: 'blur'
            }
          ],
          numberUnit: [
            {
              required: true,
              message: '请选择数量单位',
              trigger: 'blur'
            }
          ],
          buyType: [
            {
              required: true,
              message: '请选择销售属性',
              trigger: 'blur'
            }
          ],
          salePrice: [
            {
              required: true,
              message: '请输入销售价',
              trigger: 'blur'
            }
          ],
          designName: [
            {
              required: true,
              message: '请输入设计作品名称',
              trigger: 'blur'
            }
          ],
          designIdea: [
            {
              required: true,
              message: '请输入设计理念',
              trigger: 'blur'
            }
          ],
          productImgList: [
            {
              required: true,
              validator: validateProduct,
              trigger: 'blur'
            }
          ],
          structureImgList: [
            {
              required: true,
              validator: validateStructure,
              trigger: 'blur'
            }
          ],
          detailImgList: [
            {
              required: true,
              validator: validateDetail,
              trigger: 'blur'
            }
          ],
          fileType: [
            {
              required: true,
              message: '请选择文件格式',
              trigger: 'blur'
            }
          ],
          fileUrl: [
            {
              required: true,
              message: '请上传附件',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['permissions']),
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    created() {
      const that = this
      this.userId = this.userInfo.userId
      this.getSuitPeople() // 获取适用人群
      this.getStyleList() // 获取风格列表
      this.loading = true
      queryDictList('unit').then(response => {
        that.numberUnitList = response.data.data
        this.loading = false
      })
    },
    methods: {
      getSuitPeople() { // 获取适用人群
        this.loading = true
        querySuitPeople().then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.id,
              label: item.remark
            }
            this.suitPeople.push(obj)
          })
          this.loading = false
        })
      },
      handleChangePeople(val) { // 适用人群change
        this.loading = true
        this.kindList = []
        this.form.typeId = ''
        querySuitPeopleKind(val).then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.id,
              label: item.remark
            }
            this.kindList.push(obj)
          })
          this.loading = false
        })
      },
      getStyleList() { // 获取风格列表
        this.loading = true
        queryStyleList().then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.id,
              label: item.remark
            }
            this.style.push(obj)
          })
          this.loading = false
        })
      },
      handleAvatarSuccess(res) {
        this.form.surfaceImgUrl = res.data
      }, // 头像上传
      handleSizeSuccess(res) {
        this.form.sizeImage = res.data
      }, // 尺码信息
      handlePictureCardPreview(file) { // 预览图片
        this.previewImageUrl = file.url
        this.previewVisible = true
      },
      handleProductImgSuccess(response, file, fileList) {
        this.form.productImgList = []
        fileList.forEach(item => {
          const obj = {
            url: item.response.data,
            type: 'carousel'
          }
          this.form.productImgList.push(obj)
        })
      }, // 产品图上传成功
      handleStructureImgSuccess(response, file, fileList) {
        this.form.structureImgList = []
        fileList.forEach(item => {
          this.form.structureImgList.push(item.response.data)
        })
      }, // 产品结构图上传成功
      handleDetailImgSuccess(response, file, fileList) {
        this.form.detailImgList = []
        fileList.forEach(item => {
          const obj = {
            url: item.response.data,
            type: 'particulars'
          }
          this.form.detailImgList.push(obj)
        })
      }, // 详情图上传成功
      handleProductImgRemove(file, fileList) {
        this.form.productImgList = []
        fileList.forEach(item => {
          const obj = {
            url: item.response.data,
            type: 'carousel'
          }
          this.form.productImgList.push(obj)
        })
      }, // 删除图片
      handleDetailImgRemove(file, fileList) {
        this.form.detailImgList = []
        fileList.forEach(item => {
          const obj = {
            url: item.response.data,
            type: 'particulars'
          }
          this.form.detailImgList.push(obj)
        })
      }, // 删除图片
      handleFileSuccess(response) {
        this.form.fileUrl = response.data
      }, // 附件上传成功
      handleFileRemove() {
        this.form.fileUrl = ''
      }, // 附件删除
      handleSubmit() { // 提交发布
        const that = this
        that.$refs['form'].validate((valid) => {
          if (valid) {
            const params = that.form
            // if (that.good_audit) {
            //   params.publisherId = that.userId
            // } else {
            //   params.supplierId = that.userId
            // }
            if (that.form.structureImgList < 2) {
              that.$message.error('请上传产品结构图（前幅和后幅）')
              return
            }
            params.supplierId = that.userId
            params.structureFaceImage = that.form.structureImgList[0]
            params.structureBackImage = that.form.structureImgList[1]
            delete params.structureImgList
            let imgList = []
            imgList = imgList.concat(that.form.productImgList, that.form.detailImgList)
            params.imgList = imgList
            delete params.productImgList
            delete params.detailImgList
            designerPublishGoodsPc(params).then((res) => {
              that.$message({
                message: '发布成功',
                type: 'success'
              })
              setTimeout(() => {
                that.$router.go(0)
              }, 500)
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
<style scoped>
  .title{
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
  }
  .select-group {
    width: 200px!important;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }
  .el-loading-spinner .el-loading-text {
    text-align: center;
  }
  .coor-title {
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
  }
  .coor-input {
    float: left;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .coorPrice-item {
    margin-bottom: 22px;
  }
  .coor-price {
    float: left;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
</style>
